<template>
  <div class="index">
    <el-container>
      <el-header height="68px">
        <m-header></m-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <m-aside></m-aside>
        </el-aside>
        <el-main>
          <div class="order-list">
            <div class="title">购买记录</div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/purchase' }">充值购买</el-breadcrumb-item>
              <el-breadcrumb-item>购买记录</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="content">
              <el-table
                :data="tableData"
                border
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{
          'background-color': '#f5f5f5',
          'color':'#555',
          'text-align':'center'
        }"
                style="width: 100%"
              >
                <el-table-column prop="orderID" label="订单号" :formatter="dateOrder" width="300"></el-table-column>
                <el-table-column prop="productName" label="订单详情" width="200"></el-table-column>
                <el-table-column prop="productQty" label="商品数量"></el-table-column>
                <el-table-column prop="orderAmount" :formatter="dateTotal" label="金额"></el-table-column>
                <el-table-column prop="bookedDate" label="时间" width="200"></el-table-column>
                <el-table-column prop="orderStatus" :formatter="dateStatus" label="状态"></el-table-column>
              </el-table>
              <div class="block" v-if="total>10">
                <el-pagination
                  background
                  @current-change="handleCurrentChange"
                  layout="prev, pager, next"
                  :page-size="pagesize"
                  :current-page="currentPage"
                  :total="total"
                ></el-pagination>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getCookie } from "./until/index";
function init() {
  this.$ajax
    .get(
      "getsmsOrderListByUser.ashx?userId=" +
        getCookie("userid") +
        "&token=" +
        getCookie("token") +
        "&ps=" +
        this.pagesize +
        "&pi=" +
        this.currentPage
    )
    .then(res => {
      if (res.data.code == 200) {
        var data = res.data.data;

        this.tableData = data.orderList;
        this.total = Number(data.rowsCount);
      } else {
        this.$message.error(res.data.msg);
      }
    })
    .catch(error => {
      console.log(error);
    });
}
export default {
  data() {
    return {
      pagesize: 10, //每页显示条数
      currentPage: 1, //初始页
      total: 0, //总条数
      tableData: []
    };
  },
  created() {
    init.call(this);
  },
  methods: {
    handleCurrentChange(num) {
      this.currentPage = num;
      init.call(this);
    },
    // 处理订单号
    dateOrder(row, column) {
      var data = row[column.property];
      return "#" + data;
    },
    // 处理金额
    dateTotal(row, column) {
      var data = row[column.property];
      return "¥" + data;
    },
    // 处理状态
    dateStatus(row, column) {
      var data = row[column.property];
      switch (data) {
        case "0":
          return "待支付";
          break;
        case "1":
          return "支付成功";
        case "3":
          return "支付失败";
        default:
          break;
      }
    }
  }
};
</script>
<style scoped>
.index {
  overflow: hidden;
}
.el-header {
  background-color: #3a4759;
  color: #fff;
}
.el-aside {
  background-color: #485668;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
.el-main {
  background-color: #f0eff5;
  color: #333;
  text-align: center;
  height: 100%;
}
.order-list {
  width: 100%;
  min-height: 100vh;
}
.order-list .title {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
}
.el-breadcrumb {
  padding-bottom: 15px;
}
.content {
  width: 100%;
  background: #fff;
  padding: 20px;
  display: table;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.block {
  padding: 20px;
}
</style>
  